<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>车位管理</title>
  </head>
  <style type="text/css">
    .car{
      /* display: inline-block;
      background-color:green;
      height: 60px;
      width: 40px;
      margin-left: 5px; */
      margin-left: 15px;
      margin-top: 15px;
    }
    .ball{
            width:20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
    .ball:hover{
      background: white;
    }

</style>
  <body>
    

     <!-- 新 Bootstrap 核心 CSS 文件 -->
     <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">



    <div class="container">
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">停车场寻车系统</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="./PosMangement.html">车位管理</a></li>
                        <li><a href="./carMangement.html">车牌管理</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                相关链接 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="https://v3.bootcss.com/">bootstrap</a></li>
                                <li><a href="https://baidu.com/">百度</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>
              </div>
            </nav>

            <h3 style="text-align: center;">车位管理</h3>
          </div>



        <div class="tabs book clearfix " style="
          border:#ddd 1px solid;
          border-radius:4px;
          margin-top: 20px;
        ">
          <div class="wrap" style="widows: 100%;text-align: center;">
            <img src="./images/map.jpg" style="border:none;cursor:pointer;width:1130px;height: 700px;">
            <div title="苏A12345" class="ball" style="top:344.6000061035156px;left:760.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:340.5999984741211px;left:654.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:323px;left:483px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:348.6000061035156px;left:944.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:785.5999908447266px;left:396.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:784.5999908447266px;left:488.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:784.5999908447266px;left:556.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:783.5999908447266px;left:596.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:672.5999908447266px;left:556.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:584.5999908447266px;left:543.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:547.5999908447266px;left:544.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:604.5999908447266px;left:825.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:549.6000213623047px;left:740.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:492.6000213623047px;left:788.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:550.6000213623047px;left:911.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>
          </div>





          
        </div>

        


    </div>




  </body>
  <script>
    $('.wrap').click(function(e){
            var radius=5;//半径
            var offset=$(this).offset();
            var top=e.pageY-offset.top-radius+118+"px";
            var left=e.pageX-offset.left-radius+180+"px";

            console.log(e)
            console.log(top);
            console.log(left);
            // $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
            $('.wrap').append('<div title="苏A12345" class="ball" style="top:'+top+';left:'+left+'"><i class="fa fa-car" aria-hidden="true"></i></div>')
            

            var top = 210 + 118 -5+"px";
            var left = 308 + 180 -5 +"px";
            // $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"></div>')
            $('.wrap').append('<div class="ball" style="top:'+top+';left:'+left+'"><i class="fa fa-car" aria-hidden="true"></i></div>')
        })
  </script>
</html>